<template>
  <div class="app-container">
    <h2 style="color: darkslateblue">学生选课课表信息</h2>
    <!--  表单 -->
    <el-row :gutter="12">
      <el-col v-for="(course, index) in selectedList" :key="index" :span="8">
        <el-card shadow="hover">
          <el-row class="containerRow">
            <h3 class="title">课程名：</h3>
            <h3 class="contnet">{{ course.courseName }}</h3>
          </el-row>
          <el-row class="containerRow">
            <h3 class="title">学分：</h3>
            <h3 class="contnet">{{ course.credit }}</h3>
          </el-row>
          <el-row class="containerRow">
            <h3 class="title">上课地点：</h3>
            <h3 class="contnet">{{ course.classPlace }}</h3>
          </el-row>
          <el-row class="containerRow">
            <h3 class="title">上课时间：</h3>
            <h3 class="contnet">{{ course.classTime }}</h3>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js' // 导入权限判断指令，可用v-permisson

import FilenameOption from './components/FilenameOption'
import AutoWidthOption from './components/AutoWidthOption'
import BookTypeOption from './components/BookTypeOption'

import { mapGetters } from 'vuex'

import courseSelectApi from '@/api/st/courseSelect'
import teacherApi from '@/api/te/teacher'

export default {
  directives: { permission }, // 导入组件
  components: { FilenameOption, AutoWidthOption, BookTypeOption },

  computed: {
    ...mapGetters(['id', 'roles', 'avatar'])
  },

  data() {
    return {
      selectedList: [],
      teacher: {},

      dialogVisible: false, // 图片放大对话框状态
      dialogImageUrl: '', // 图片放大对话框url
      dialogTeacherInfoFormVisible: false, // 教师详情对话框状态

      // 下载xlsx用的data
      downloadLoading: false, // 读取进度条
      filename: 'student', // 文件名
      autoWidth: true,
      bookType: 'xlsx'
    }
  },

  created() {
    this.getStudent()
  },

  methods: {
    handleSelectionChange() {},
    // 获取教师详细信息
    getTeacherInfo(id) {
      teacherApi.getTeacherById(id).then((res) => {
        this.teacher = res.data.teacher
        if (this.teacher.hiredate) {
          this.teacher.hiredate = this.$moment(this.teacher.hiredate).format(
            'YYYY-MM-DD'
          )
        }
        if (this.teacher.birth) {
          this.teacher.birth = this.$moment(this.teacher.birth).format(
            'YYYY-MM-DD'
          )
        }
        this.dialogTeacherInfoFormVisible = true
      })
    },
    // 图像放大
    picturePreview(name) {
      if (name == 'photo') {
        this.dialogImageUrl = this.student.photo
      } else if (name == 'lecense') {
        this.dialogImageUrl = this.student.lecense
      }
      this.dialogVisible = true
    },

    // 获取学生
    getStudent() {
      // 获取选课以及分数
      courseSelectApi.getSelectedCourseclass(this.id).then((res) => {
        this.selectedList = res.data.list
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.containerRow {
  display: flex;
}
.title {
  width: 25%;
}
.contnet {
  width: 75%;
  margin-left: 25px;
  color: #606266;
}
</style>
